<!--
  *@Description : 这里是付款界面
  *@author 萧红
  *@date 2020-04-06 17:16
  *@LastEditTime 2020-04-06 17:16
  *@LastEdititors
-->
<template>
    <div id="pay">
      <tittle :title="'支付'"></tittle>
      <div :style="{height:$inerHeight+'px'}">
        <cube-scroll :data="[1,2,3,4]">
          <div class="pay-order">
            <div class="left">
              <img :src="payData.selectedStyle.img" alt="">
            </div>
            <div class="right">
              <div class="txt">支付金额</div>
              <div class="number">￥{{payData.data.buyNumber * payData.selectedStyle.price + payData.data.youfei}}</div>
            </div>
          </div>
          <div class="name">
            商品：{{payData.data.productName}}
          </div>
          <div class="style" v-html="this.selectStyle">
          </div>
          <div class="border-bottom-3px"></div>
          <div class="pay-way">
            <cube-radio-group v-model="selected" @input="changeSelect">
              <div class="way-item" v-for="(way,index) in payWay" :key="index">
                <cube-radio :option="''+index" :position="'right'">
                  <div class="row">
                    <i :class="way.icon" :style="{color:way.color}"></i>
                    <span>{{way.label}}</span>
                  </div>
                </cube-radio>
              </div>
            </cube-radio-group>
            <div class="payimg">
              <img :src="payImg" alt="">
            </div>
            <div class="input">
              <input type="text" v-model="orderNumber" placeholder="支付成功的订单号(后8位)" maxlength="8">
            </div>
          </div>
          <div class="hint">
            温馨提示：恶意下单超过3次，我们将会限制您账号的下单权限，感谢您的配合与理解，谢谢
          </div>
        </cube-scroll>
      </div>
      <div class="confirm" @click="clickConfirm">
        确定
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
export default {
  name: 'Pay',
  components: {
    Tittle
  },
  computed: {
    selectStyle () {
      return `已选择：${this.payData.selectedStyle.name} ${this.payData.selectedStyle.size} <span style='color:red'>￥${this.payData.selectedStyle.price}</span> x ${this.payData.data.buyNumber}`
    }
  },
  data () {
    return {
      orderNumber: '', // 订单号码
      selected: '0',
      payImg: '../../../static/pay/weixin.jpg',
      payData: [],
      payWay: [
        {
          label: '微信',
          icon: 'iconfont iconweixin',
          color: '#00d10d',
          payimg: '../../../static/pay/weixin.jpg'
        },
        {
          label: '支付宝',
          icon: 'iconfont icon-zhifubao',
          color: '#00a0e9',
          payimg: '../../../static/pay/zhifubao.jpg'
        },
        {
          label: 'qq红包',
          icon: 'iconfont iconqqzhifu',
          color: '#ff4466',
          payimg: '../../../static/pay/qq.jpg'
        }
      ]
    }
  },
  created () {
    let data = sessionStorage.getItem('payData')
    if (data) {
      this.payData = JSON.parse(data)
      console.log(this.payData)
    }
  },
  methods: {
    changeSelect (value) {
      this.payImg = this.payWay[value].payimg
    },
    clickConfirm () {
      if (this.orderNumber === '' || this.orderNumber.length < 8) {
        this.$toast('请输入订单号（8位）')
        return false
      }
      let params = {
        userId: localStorage.getItem('userId'), // 用户id
        pid: this.payData.data.pid, // 商品id
        reserveName: this.payData.selectedAddress.name, // 收件人姓名
        phone: this.payData.selectedAddress.phone, // 收件人手机号
        productName: this.payData.data.productName, // 产品名称
        style: this.payData.selectedStyle.name, // 样式颜色
        size: this.payData.selectedStyle.size, // 选择的尺寸
        yunfei: this.payData.data.youfei, // 邮费
        price: this.payData.selectedStyle.price, // 单价
        buyNumber: this.payData.data.buyNumber, // 购买数量
        totalPrice: this.payData.selectedStyle.price * this.payData.data.buyNumber + this.payData.data.youfei, // 总价
        message: this.payData.message, // 用户留言
        province: this.payData.selectedAddress.province, // 省
        city: this.payData.selectedAddress.city, // 市
        county: this.payData.selectedAddress.county, // 区
        address: this.payData.selectedAddress.address, // 地址
        allAddress: this.payData.allAddress, // 全地址
        payway: this.payWay[this.selected].label,
        orderNumber: this.orderNumber // 订单号码
      }
      // this.$post({path: '/user/add', data: params})
      this.apis.addOrder(params).then(res => {
        if (res.code === 200) {
          this.$toast(res.msg, 'correct', 1500)
          setTimeout(() => {
            this.toNewPage('/shop')
          }, 1500)
        } else {
          this.$toast(res.msg)
        }
      })
      // console.log(params)
    }
  }
}
</script>

<style lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#pay
{
  .confirm
  {
    width: 100%;
    height: 1.375rem;
    line-height: 1.375rem;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1002;
    color: #fffafa;
    font-size: 0.375rem;
    letter-spacing: 5px;
    font-weight: bolder;
    background-color: #f46;
  }
  .pay-order
  {
    padding 8px 5px
    display flex
    flex-flow row nowrap
    justify-content space-around
    .left
    {
      width: 30%
      height: 50px
      background-color red
      img
      {
        width  100%
        height 100%
      }
    }

    .right
    {
      width 60%
      box-sizing border-box
      text-align left
      .txt
      {
        width 50%
        height: 25px
        line-height 25px
        font-size 9px
        color:#555;
        text-align center
      }
      .number
      {
        height 25px
        line-height 25px
        color:#ff4466
        font-size 15px
      }
    }
  }
  .name,.style
  {
    padding  3px 10px
    text-align left
    font-size 5px
    color #999
  }
  .style
  {
    padding-bottom 8px
  }
  .border-bottom-3px
  {
    width 100%
    border-bottom 6px solid #f0f0f0
  }
  .pay-way
  {
    .cube-radio_selected .cube-radio-ui
    {
      background-color #ff4466
    }
    .row
    {
      width 100%
      display flex
      flex-flow row nowrap
      align-items center
      color #9bdaf6
      font-size 7px
      i
      {
        font-size 12px
        margin-right:5px
      }
    }
    .payimg
    {
      width 100%
      height 100px
      margin 5px 0px
      img
      {
        max-width 100%
        height 100%
      }
    }
    .input
    {
      width 100%
      height 20px
      padding 2px 10px
      input
      {
        width 100%
        height: 20px
        text-align left
        outline none
      }
    }
  }
  .hint
  {
    width 100%
    line-height 10px
    padding 5px 0px
    font-weight bolder
  }
}
</style>
